<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 900px),only screen and (min-device-width： 900px)" href="css/seven.css"/>
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 900px),only screen and （max-device-width： 900px）" href="css/seven_change.css"/>
</head>

<body>
    <div class="left">
        <h2>
            <img src="img/logo.jpg" alt="">
            <span>Rukada Admin</span>
        </h2>
        <ul>
            <li class="li_one">MAIN NAVIGATION</li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li class="li_one">LABELS</li>
            <li>
                <div class="left_he">
                    <img src="img/img-2.jpg" alt="">
                    <span>Important</span>
                </div>
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-2.jpg" alt="">
                    <span>Important</span>
                </div>
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-2.jpg" alt="">
                    <span>Important</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="right">
        <header>
            <div class="right_left">
                <img src="img/sangang.jpg" alt="">
                <input type="text" placeholder="Enter keywords">
            </div>
            <div class="right_right">
                <img src="img/header-1.jpg" alt="">
                <img src="img/header-2.jpg" alt="">
                <img src="img/header-3.jpg" alt="">
                <img src="img/header-4.jpg" alt="">
            </div>
        </header>
        <section>
            <div class="section_left">
                <span>Sparkline Chart</span>
                <p><a href="">Rukada</a> / <a href="">Sparkline</a> / <span>Sparkline Chart</span></p>
            </div>
            <img src="img/annnnn.jpg" alt="">
        </section>
        <div class="zhong">
            <ul>
                <li class="li_one">
                    <p id="p_one" style="width:200px;height:50px;"></p>
                    <p class="pp">
                        <span>New Posts</span><span>12050</span>
                    </p>
                </li>
                <li class="li_two">
                    <p id="p_two" style="width:200px;height:50px;"></p>
                    <p class="pp">
                        <span>Comments</span><span>43250</span>
                    </p>
                </li>
            </ul>
            <ul>
                <li class="li_three">
                    <p id="p_three" style="width:200px;height:50px;"></p>
                    <p class="pp">
                        <span>Total Likes</span><span>55126</span>
                    </p>
                </li>
                <li class="li_four">
                    <p id="p_four" style="width:200px;height:50px;"></p>
                    <p class="pp">
                        <span>Total Views</span><span>2550</span>
                    </p>
                </li>
            </ul>
            <ul class="three">
                <li>
                    <p class="p_one">
                        <span>PIE CHARTS</span>
                    </p>
                    <p id="p_five" style="width:100%;height:200px;"></p>
                </li>
                <li>
                    <p class="p_one">
                        <span>BAR CHARTS</span>
                    </p>
                    <p id="p_six" style="width:100%;height:200px;"></p>
                </li>
                <li>
                    <p class="p_one">
                        <span>BAR CHARTS</span>
                    </p>
                    <p id="p_seven" style="width:100%;height:200px;"></p>
                </li>
            </ul>
        </div>
        <div class="foot">
                <p> Copyright © 2018 Rukada Admin</p>
        </div>
    </div>
</body>

</html>
<script src="js/echarts.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/publick.js"></script>
<script type="text/javascript">
    one();
    two();
    three();
    four();
    five();
    six();
    seven();
fn();
    function one() {
        var myChart = document.getElementById('p_one');
        var myChart = echarts.init(document.getElementById('p_one'));
        option = {
            color: ['#ffff'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            // grid: {
            //     left: '3%',
            //     right: '4%',
            //     bottom: '3%',
            //     containLabel: true
            // // },
            xAxis: [{
                show: true,
                type: 'category',
                // data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true,
                    show: false
                },
                axisLine: {
                    "show": false

                }
            }],
            yAxis: [{

                show: false,
                type: 'value'
            }],
            series: [{
                name: '直接访问',
                type: 'bar',
                barWidth: '20%',
                data: [500, 552, 200, 334, 390, 330, 220]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {

            myChart.resize();

        });
    }

    function two() {
        var myChart1 = document.getElementById('p_two');
        var myChart1 = echarts.init(document.getElementById('p_two'));

        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '100%',
                radius: ['0', '80%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                        value: 335
                    },
                    {
                        value: 310
                    },
                    {
                        value: 234
                    },
                    {
                        value: 135
                    },
                    {
                        value: 1548
                    }
                ]
            }]
        };
        myChart1.setOption(option);
        window.addEventListener("resize", function () {

            myChart1.resize();

        });
    }


    function three() {
        var myChart2 = document.getElementById('p_three');
        var myChart2 = echarts.init(document.getElementById('p_three'));

        option = {
            xAxis: {
                show: true,
                type: 'category',
                boundaryGap: false,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true,
                    show: false
                },
                axisLine: {
                    "show": false

                }
            },
            yAxis: {
                show: false,
                type: 'value'
            },
            series: [{
                data: [0, 932, 321, 934, 290, 1330, 0],
                type: 'line',
                areaStyle: {}
            }]
        };
        myChart2.setOption(option);
        window.addEventListener("resize", function () {

            myChart2.resize();

        });
    }

    function four() {
        var myChart3 = document.getElementById('p_four');
        var myChart3 = echarts.init(document.getElementById('p_four'));

        option = {
            xAxis: {
                show: true,
                type: 'category',
                axisTick: {
                    alignWithLabel: true,
                    show: false
                },
                axisLine: {
                    "show": false

                }
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                show: false
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        };
        myChart3.setOption(option);
        window.addEventListener("resize", function () {

            myChart3.resize();

        });
    }

    function five() {
        var myChart4 = document.getElementById('p_five');
        var myChart4 = echarts.init(document.getElementById('p_five'));

        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '100%',
                radius: ['0', '80%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                        value: 335
                    },
                    {
                        value: 310
                    },
                    {
                        value: 234
                    },
                    {
                        value: 135
                    },
                    {
                        value: 1548
                    }
                ]
            }]
        };
        myChart4.setOption(option);
        window.addEventListener("resize", function () {

            myChart4.resize();

        });
    }

    function six() {
        var myChart5 = document.getElementById('p_six');
        var myChart5 = echarts.init(document.getElementById('p_six'));
        option = {
            color: ['#a528aa'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            // grid: {
            //     left: '3%',
            //     right: '4%',
            //     bottom: '3%',
            //     containLabel: true
            // // },
            xAxis: [{
                show: true,
                type: 'category',
                // data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true,
                    show: false
                },
                axisLine: {
                    "show": false

                }
            }],
            yAxis: [{

                show: false,
                type: 'value'
            }],
            series: [{
                name: '直接访问',
                type: 'bar',
                barWidth: '20%',
                data: [500, 552, 200, 334, 390, 330, 220]
            }]
        };
        myChart5.setOption(option);
        window.addEventListener("resize", function () {

            myChart5.resize();

        });
    }

    function seven() {
        var myChart6 = document.getElementById('p_seven');
        var myChart6 = echarts.init(document.getElementById('p_seven'));

        option = {
            xAxis: {
                show: true,
                type: 'category',
                boundaryGap: false,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true,
                    show: false
                },
                axisLine: {
                    "show": false

                }
            },
            yAxis: {
                show: false,
                type: 'value'
            },
            series: [{
                data: [0, 932, 321, 934, 290, 1330, 0],
                type: 'line',
                areaStyle: {}
            }]
        };
        myChart6.setOption(option);
        window.addEventListener("resize", function () {

            myChart6.resize();

        });
    }
</script>